import React, { memo } from "react";

import { changeCountAction } from "./store/modules/count";
import { useDispatch, useSelector } from "react-redux";

const App = memo((props) => {
  // 1. 使用useSelector将redux中store的数据映射到组件内部
  const { count } = useSelector((state) => ({
    count: state.count.count
  }))
  // 2. 使用useDispatch
  const dispatch = useDispatch() 

  function changeCountHandle(val) {
    dispatch(changeCountAction(val))
  }
  return (
    <div>
      当前计数：{ count }
      <button onClick={e => changeCountHandle(1)}>+1</button>
      <button onClick={e => changeCountHandle(-1)}>-1</button>
    </div>
  )
});


export default App
